<script setup lang='ts'>
  import { computed } from 'vue';
  import { getAssetsFile } from '@/utils/public'
  const props = defineProps({
    dialogshow:{
      type:Boolean,
      default:false
    },
    closeShow:{
      type:Number,
      default:0
    },
    titleBox:{
      type:Boolean,
      default:true
    },
  })
  const show = computed({
    set:(val)=>{
      if(!val) handleclose()
    },
    get:()=>{
      return props.dialogshow
    }
  })
  const $emit = defineEmits(['update:dialogshow'])
  const handleclose = ()=> {
    $emit('update:dialogshow',false)
  };
</script>
<template>
  <div>
    <van-popup class="dialog-popup" v-model:show="show">
      <div class="Functionality">
        <div v-if="titleBox" class="titleBox">
          <div class="titleImg">
            <slot name="titleImg"></slot>
          </div>
          <img v-if="closeShow == 2" @click="handleclose" :src="getAssetsFile('icon7.png')" class="iconImg">
        </div>
        <slot></slot>
      </div>
      <img v-if="closeShow == 1" @click="handleclose" :src="getAssetsFile('closeimg.png')" class="closeimg">
    </van-popup>
  </div>
</template>
<style lang='scss' scoped>
  .Functionality {
    position: relative;
    .titleBox {
      position: relative;
      width: 100%;
      margin-bottom: -1px;
      .titleImg {
        width: 190px;
        height: 34px;
        margin: 0 auto;
      }
      .iconImg {
        position: absolute;
        top: 2px;
        right: 0;
        width: 20px;
        height: 20px;
      }
    }
  }
  .closeimg {
    width: 40px;
    height: 40px;
    margin: 30px auto 0;
  }
</style>